import React, { useState, useEffect } from "react";
import { Button, Divider } from "antd";
import ChildCom from "./ChildCom/ChildCom";

const UseMemo: React.FC = (): React.ReactElement => {
  const [one, setone] = useState<string | number>("一号组件");
  useEffect(() => {
    console.log(1111);
  }, [one]);
  const [two, settwo] = useState("二号组件");
  useEffect(() => {
    console.log(2222);
  }, [two]);
  const okto = () => {
    console.log("了解了解");
  };

  return (
    <div>
      <h1>
        UseMemo Hook的出现是用于解决性能问题的{" "}
        <Button onClick={okto}>了解</Button>
      </h1>
      <Divider orientation="left">fine</Divider>
      <h1>
        有时父子组件无需同时更新（同时更新会调用太多接口），这个hook就能够起作用{" "}
        <Button onClick={okto}>了解</Button>
      </h1>
      <Divider orientation="left">start</Divider>
      <>
        <div>{one}</div>
        <Button
          onClick={() => {
            setone(one + "1");
          }}
        >
          一号
        </Button>
        <div>{two}</div>
        <Button
          onClick={() => {
            settwo(two + "1");
          }}
        >
          二号
        </Button>
        <Divider orientation="left">
          else--这里第一次搞明白了函数式组件的父子传值
        </Divider>
        {/* <MemoChild /> */}
        {/* <MemoChild/> */}
        <ChildCom name={two} change={settwo} />
      </>
    </div>
  );
};
export default UseMemo;
